﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Monk.UI - 百签软件（中山）有限公司</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta charset="utf-8" />
    <link href="monk.ui.min.css" rel="stylesheet" />
</head>
<body>
    <div class="monk-content-10">
        <a href="http://www.baisoft.org" class="monk-input-button turquoise" target="_blank">百签软件（中山）有限公司</a>

        <a href="markdown.html" class="monk-input-button emerland" target="_blank">Markdown 编辑器</a>

        <a href="https://github.com/MonkSoul/Monk.UI" class="monk-input-button peterRiver" target="_blank">开源地址</a>

        <a href="https://github.com/MonkSoul/Monk.UI/releases" class="monk-input-button amethyst" target="_blank">更新日志</a>
        <br />
        <br />
        <!--=============开始=============-->
        <h1>表单</h1>
        <form class="monk-form">
            <h2>普通输入框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input min" placeholder="请输入..." />
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入..." />
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input normal" placeholder="请输入..." />
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input large" placeholder="请输入..." />
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input xlarge" placeholder="请输入..." />
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>普通输入框，必填</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-lock"></span>
                    <input type="text" class="monk-form-input normal" placeholder="请输入..." />
                    <span class="monk-iconfont icon-monk-required"></span>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>普通输入框，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-lock"></span>
                    <input type="text" class="monk-form-input normal" readonly="readonly" placeholder="请输入..." />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>普通输入框，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-lock"></span>
                    <input type="text" class="monk-form-input normal" disabled="disabled" placeholder="请输入..." />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>多行输入框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea min" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea middle" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea normal" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea large" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea xlarge" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>多行输入框，必填</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea normal" placeholder="请输入..."></textarea>
                    <span class="monk-iconfont icon-monk-required textarea-icon"></span>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>多行输入框，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea normal" placeholder="请输入..." readonly="readonly"></textarea>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>多行输入框，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input textarea-icon"></span>
                    <textarea class="monk-form-textarea normal" placeholder="请输入..." disabled="disabled"></textarea>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>复选框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-checkbox-list">
                    <input type="checkbox" name="like" class="monk-checkbox" value="0" text="篮球" />
                    <input type="checkbox" name="like" class="monk-checkbox" value="1" text="足球" />
                    <input type="checkbox" name="like" class="monk-checkbox" value="2" text="百小僧" checked="checked" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>复选框，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-checkbox-list">
                    <input type="checkbox" name="like" class="monk-checkbox" value="0" text="篮球" readonly="readonly" />
                    <input type="checkbox" name="like" class="monk-checkbox" value="2" text="百小僧" checked="checked" readonly="readonly" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>复选框，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-checkbox-list">
                    <input type="checkbox" name="like" class="monk-checkbox" value="0" text="篮球" disabled="disabled" />
                    <input type="checkbox" name="like" class="monk-checkbox" value="2" text="百小僧" checked="checked" disabled="disabled" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>切换滑块</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" checked="checked" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>切换滑块，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" readonly="readonly" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" readonly="readonly" checked="checked" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>切换滑块，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" disabled="disabled" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-switch-list">
                    <input type="checkbox" name="like" class="monk-switch" value="0" disabled="disabled" checked="checked" text="启用" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>单选框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-radio-list">
                    <input type="radio" class="monk-radio" name="sex" value="0" text="男性" />
                    <input type="radio" class="monk-radio" name="sex" value="1" text="女性" checked="checked" />
                    <input type="radio" class="monk-radio" name="sex" value="2" text="人妖" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>单选框，只读（男性为只读）</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-radio-list">
                    <input type="radio" class="monk-radio" name="sex1" value="0" text="男性" readonly="readonly" />
                    <input type="radio" class="monk-radio" name="sex1" value="1" text="女性" checked="checked" />
                    <input type="radio" class="monk-radio" name="sex1" value="2" text="人妖" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>单选框，禁用（男性，女性为禁用）</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-radio-list">
                    <input type="radio" class="monk-radio" name="sex2" value="0" text="男性" disabled="disabled" />
                    <input type="radio" class="monk-radio" name="sex2" value="1" text="女性" checked="checked" disabled="disabled" />
                    <input type="radio" class="monk-radio" name="sex2" value="2" text="人妖" />
                    <input type="radio" class="monk-radio" name="sex2" value="3" text="保密" />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>下拉选择框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap monk-form-select-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入或选择..." />
                    <span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span>
                </div>
                <div class="monk-form-select monk-none">
                    <select class="monk-select">
                        <option value="">请选择...</option>
                        <option value="0">列表项目一</option>
                        <option value="1" selected="selected">列表项目二</option>
                        <option value="2">列表项目三</option>
                        <option value="3">列表项目四</option>
                        <option value="4">列表项目五</option>
                        <option value="5">列表项目六</option>
                        <optgroup label="这里是分类栏目"></optgroup>
                        <option value="6">列表项目七</option>
                        <option value="7">列表项目八</option>
                        <option value="8">列表项目九</option>
                        <option value="9">列表项目十</option>
                    </select>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <h3>树下拉列表</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap monk-form-select-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入或选择..." />
                    <span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span>
                </div>
                <div class="monk-form-select monk-none">
                    <select class="monk-select">
                        <option value="">请选择上级模块</option>
                        <option value="0">系统模块</option>
                        <option value='1'>├ 站点管理</option>
                        <option value='2'>　├ 站点设置</option>
                        <option value='3'>　├ 内容管理</option>
                        <option value='4'>　　├ 类别管理</option>
                        <option value='5'>　　├ 单页管理</option>
                        <option value='6'>　├ 频道管理</option>
                        <option value='7'>　├ 广告管理</option>
                        <option value='8'>　├ 留言板管理</option>
                        <option value='9'>　　├ 留言类别</option>
                        <option value='10'>　├ 碎片管理</option>
                        <option value='11'>　├ 友情链接管理</option>
                        <option value='12'>　　├ 类别管理</option>
                        <option value='13'>├ 微信管理</option>
                        <option value='14'>　├ 基本设置</option>
                        <option value='15'>├ 移动管理</option>
                        <option value='16'>　├ 基本设置</option>
                    </select>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>下拉选择框，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap monk-form-select-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入或选择..." readonly="readonly" />
                    <span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span>
                </div>
                <div class="monk-form-select monk-none">
                    <select class="monk-select">
                        <option value="">请选择...</option>
                        <option value="0">列表项目一</option>
                        <option value="1">列表项目二</option>
                        <option value="2">列表项目三</option>
                        <option value="3" selected="selected">列表项目四</option>
                        <option value="4">列表项目五</option>
                        <option value="5">列表项目六</option>
                        <optgroup label="这里是分类栏目"></optgroup>
                        <option value="6">列表项目七</option>
                        <option value="7">列表项目八</option>
                        <option value="8">列表项目九</option>
                        <option value="9">列表项目十</option>
                    </select>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>下拉选择框，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap monk-form-select-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请输入或选择..." disabled="disabled" />
                    <span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span>
                </div>
                <div class="monk-form-select monk-none">
                    <select class="monk-select">
                        <option value="">请选择...</option>
                        <option value="0">列表项目一</option>
                        <option value="1">列表项目二</option>
                        <option value="2">列表项目三</option>
                        <option value="3">列表项目四</option>
                        <option value="4">列表项目五</option>
                        <option value="5">列表项目六</option>
                        <optgroup label="这里是分类栏目"></optgroup>
                        <option value="6" selected="selected">列表项目七</option>
                        <option value="7">列表项目八</option>
                        <option value="8">列表项目九</option>
                        <option value="9">列表项目十</option>
                    </select>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>数字输入框</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-number"></span>
                    <input type="number" class="monk-form-input middle" onkeyup="this.value=this.value.replace(/!^[0-9]*$/g,'')" onafterpaste="this.value=this.value.replace(/!^[0-9]*$/g,'')" placeholder="请输入..." />
                    <span class="monk-iconfont icon-monk-required"></span>
                    <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>数字输入框，只读</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-number"></span>
                    <input type="number" class="monk-form-input middle" onkeyup="this.value=this.value.replace(/!^[0-9]*$/g,'')" onafterpaste="this.value=this.value.replace(/!^[0-9]*$/g,'')" readonly="readonly" placeholder="请输入..." />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>数字输入框，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-number"></span>
                    <input type="number" class="monk-form-input middle" onkeyup="this.value=this.value.replace(/!^[0-9]*$/g,'')" onafterpaste="this.value=this.value.replace(/!^[0-9]*$/g,'')" disabled="disabled" placeholder="请输入..." />
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>时间选择</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap monk-form-time-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请选择..." value="01:02:03" readonly="readonly" />
                    <span class="monk-iconfont border-left icon-monk-time"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h3>时间选择，禁用</h3>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap monk-form-time-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input middle" placeholder="请选择..." value="01:02:03" disabled="disabled" />
                    <span class="monk-iconfont border-left icon-monk-time"></span>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>文件选择</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap">
                    <span class="monk-iconfont border-right icon-monk-input"></span>
                    <input type="text" class="monk-form-input normal" placeholder="请选择..." />
                    <span class="monk-iconfont border-left icon-monk-file"></span>
                </div>
                <div class="monk-form-wrap monk-form-image-wrap">
                    <input type="file" class="monk-file" />
                    <button class="monk-input-button turquoise">选择文件</button>
                </div>
                <div class="monk-form-tip">写点什么描述一下</div>
            </div>
            <!--========分割线========-->
            <h2>显示文本</h2>
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap monk-form-detail-wrap monk-full">
                    百签软件，源于百签。
                </div>
            </div>
            <!--========分割线========-->
            <div class="monk-form-item">
                <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
                <div class="monk-form-wrap monk-form-detail-wrap monk-full">
                    百签软件（中山）有限公司 是中国一家高科技软件公司，总部位于广东省中山市西区。百签软件（中山）有限公司 主要提供全平台应用程序开发，其中包括移动应用程序（Android，IOS，Windows Phone），桌面应用程序（Windows，Linux，Mac），以及浏览器端应用程序（桌面端，移动端）等开发。
                </div>
            </div>
            <!--========分割线========-->
            <h2>提交按钮</h2>
            <input type="submit" class="monk-input-button turquoise monk-form-submit" value="保存提交" />
            <!--========分割线========-->
            <button class="monk-input-button emerland">普通按钮</button>
            <!--========分割线========-->
            <input type="button" class="monk-input-button peterRiver" value="普通按钮" />
            <!--========分割线========-->
            <input type="reset" class="monk-input-button amethyst" value="重置按钮" />
            <!--========分割线========-->
            <input type="button" class="monk-input-button clouds" value="灰色按钮" />
            <!--========分割线========-->
            <a class="monk-input-button turquoise">链接按钮</a>
            <!--========分割线========-->
            <a class="monk-input-button turquoise"><span class="monk-iconfont icon-monk-time"></span>图标按钮</a>
            <!--========分割线========-->
            <button class="monk-input-button emerland" disabled="disabled">禁用按钮</button>
            <!--========分割线========-->
        </form>
        <h1>第三方插件</h1>
        <h2>rainbow.js 代码高亮</h2>
        <!--依赖样式和脚本-->
        <link href="libs/rainbow-v2.1.2/themes/css/github.css" rel="stylesheet" />
        <script src="libs/rainbow-v2.1.2/rainbow-custom.min.js"></script>
        <!--========分割线========-->
        <h3>HTML高亮</h3>
        <pre><code data-language="html"><p>百签软件，源于百签。</p></code></pre>
        <!--========分割线========-->
        <h3>css高亮</h3>
        <pre><code data-language="css">* { box-sizing: border-box; -moz-box-sizing: border-box; }</code></pre>
        <!--========分割线========-->
        <h3>js高亮</h3>
        <pre><code data-language="javascript">exports.fileInit = function () {
    $(".monk-file").on({
        change: function () {
            var value = $(this).val();
            var input = $(this).parent(".monk-form-image-wrap").prev(".monk-form-wrap").children(".monk-form-input");
            input.val(value);
        }
    });
};</code></pre>
        <!--========分割线========-->
        <h3>php高亮</h3>
        <pre><code data-language="php">namespace app\index\controller;
class Index
{
    public function index()
    {
        return 'index';
    }
}</code></pre>
        <!--========分割线========-->
        <h3>C#高亮</h3>
        <pre><code data-language="csharp">using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(Monk.App_Start.Startup))]
namespace Monk.App_Start
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}</code></pre>
        <!--========分割线========-->
        <h3>Java高亮</h3>
        <pre><code data-language="java">public static void insertionSort(int[] data) {
    for (int index = 1; index < data.length; index++) {
        int key = data[index];
        int position = index;
        // shift larger values to the right
        while (position > 0 && data[position - 1] > key) {
            data[position] = data[position - 1];
            position--;
        }
        data[position] = key;
    }
}</code></pre>
        <!--========分割线========-->
        <h3>sql高亮</h3>
        <pre><code data-language="sql">select * from web where site='http://www.baisoft.org/'</code></pre>
        <!--========分割线========-->
        <h2>Editor.md 编辑器</h2>
        <h3>代码编辑器（HTML 代码编辑器）</h3>
        <div class="monk-form-item">
            <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
            <div class="monk-form-wrap monk-form-editormd-wrap monk-full">
                <div id="monk-form-html-code"></div>
            </div>
            <div class="monk-form-tip">写点什么描述一下</div>
        </div>
        <!--========分割线========-->
        <h3>更多类型代码编辑器，只需要修改 初始化脚本的 <label class="monk-color-peterriver">mode参数即可</label></h3>
        <pre><code data-language="javascript">htmlcode = editormd("monk-form-html-code", {
    autoFocus: false,
    name: "HtmlCode",
    width: "100%",
    height: 300,
    watch: false,
    toolbar: false,
    codeFold: true,
    searchReplace: true,
    placeholder: "试试写写代码吧！",
    value: "",
    mode: "text/html",  // 修改这里即可变更为该语言的编辑器，目前支持（"text/html", "javascript", "php", "text/xml", "text/json", "clike", "javascript", "perl", "go", "python", "clike", "css", "ruby"）参数
    path: 'libs/editor.md-v1.5.0/lib/'
});</code></pre>
        <!--========分割线========-->
        <h3>非常强大的Markdown编辑器</h3>
        <a href="markdown.html" class="monk-input-button emerland" target="_blank">查看Markdown 编辑器</a>
        <h1>更多功能，整理开发中。。。。</h1>
    </div>
    <script src="libs/jquery-3.1.1/jquery-3.1.1.min.js"></script>
    <script src="monk.ui.min.js"></script>
    <!--Rainbow.js依赖库-->
    <!--样式-->
    <link href="libs/rainbow-v2.1.2/themes/css/github.css" rel="stylesheet" />
    <!--脚本-->
    <script src="libs/rainbow-v2.1.2/rainbow-custom.min.js"></script>
    <!--Rainbow.js依赖库结束-->
    <!--===========================================-->
    <!--Editor.md 依赖库-->
    <!--样式-->
    <link href="libs/editor.md-v1.5.0/css/editormd.css" rel="stylesheet" />
    <!--脚本-->
    <!--Editro.md 依赖库结束-->
    <script src="libs/editor.md-v1.5.0/editormd.js" type="text/javascript"></script>
    <script type="text/javascript">
        var htmlcode;
        $(function () {
            // html代码编辑器
            htmlcode = editormd("monk-form-html-code", {
                autoFocus: false,
                name: "HtmlCode",
                width: "100%",
                height: 300,
                watch: false,
                toolbar: false,
                codeFold: true,
                searchReplace: true,
                placeholder: "试试写写HTML代码吧！",
                value: "",
                mode: "text/html",
                path: 'libs/editor.md-v1.5.0/lib/'
            });



            // 以下代码和插件无关，只是为了让网站能够在手机上查看
            function resizeSize() {
                $(".monk-form-wrap").each(function () {
                    var parentWidth = $(this).parent(".monk-form-item").outerWidth(true);
                    var wrapWidth = $(this).outerWidth(true);
                    if (wrapWidth >= parentWidth) {
                        var width = 0;
                        $(this).children().each(function () {
                            if ($(this).is(".monk-form-input") || $(this).is(".monk-form-textarea")) {
                            }
                            else {
                                width += $(this).outerWidth(true);
                            }
                        });
                        if ($(this).children(".monk-form-input,.monk-form-textarea")) {
                            $(this).children(".monk-form-input,.monk-form-textarea").css("width", (parentWidth - width - 2) + "px");
                        }
                    }
                });
            }
            resizeSize();
            $(window).resize(function () {
                resizeSize();
            });
        });
    </script>
</body>
</html>
